<template>
  <div>
    <!--条件搜索区域-->
    <el-row>
      <el-col :span="24">
        <el-card header=" ">
          <span class="header2">产品列表</span>
          <el-form :inline="true" style="margin: 0 0 0 300px">
            <el-form-item label="产品名称：">
              <el-input
                  v-model="searchProduct.productName"
                  placeholder="名称"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!--数据显示区域-->
    <el-row>
      <el-col :span="24">
        <el-card>
          <!-- 新增按钮 -->
          <el-header style="background-color: #ffffff; margin-left: -5px">
            <el-button @click="handleSave()" icon="el-icon-circle-plus-outline">新增产品</el-button>
          </el-header>
          <!-- 产品详细信息 -->
          <el-table :data="productData" style="width: 100%">
            <el-table-column
                width="80"
                prop="id"
                label="ID">
            </el-table-column>
            <el-table-column
                width="220"
                prop="title"
                label="产品名称">
            </el-table-column>
            <el-table-column
                width="170"
                prop="price"
                label="价格/￥">
            </el-table-column>
            <el-table-column
                width="210"
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                width="210"
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button
                    style="margin: 0 0 0 0"
                    icon="el-icon-setting"
                    size="mini"
                    type="warning"
                    @click="setDialog(scope.row.id,scope.row.title,scope.row.price)"
                    slot="reference">编辑
                </el-button>
                <el-popconfirm :title="('确定删除'+ scope.row.title +'吗？')" @confirm="remove(scope.row.id)">
                  <el-button
                      style="margin: 0 0 0 15px"
                      icon="el-icon-close"
                      size="mini"
                      type="danger"
                      slot="reference">删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!--分页-->
    <el-row class="page-row">
      <el-pagination
          class="el-pagination"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 30, 50]"
          @size-change="sizeChange"
          @current-change="currentChange"
          @prev-click="currentChange"
          @next-click="currentChange"
          :current-page="current"
          :page-size="size"
          :total="total">
      </el-pagination>
    </el-row>

    <!-- 添加 -->
    <el-dialog title="添加产品" :visible.sync="saveDialog" width="600px">
      <el-form :model="productObj" ref="ruleForm" label-width="80px">
        <el-form-item label="产品名称" prop="title" :rules="[
            { required: true, message: '名称不能为空'}]">
          <el-input v-model="productObj.title" maxlength="8" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="价格(分)" prop="price" :rules="[
            { required: true, message: '价格不能为空'},
            { type: 'number', message: '价格必须为数字值'}]">
          <el-input v-model.number="productObj.price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 255px; margin: 45px 0 0 65px" @click="productAdd"
                     :disabled="productObj.title===''||productObj.price===null||productSet.price===''"
          >立即添加
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog title="编辑产品" :visible.sync="updateDialog" width="600px">
      <el-form :model="productSet" ref="ruleForm" label-width="80px">
        <el-form-item label="产品ID" prop="id">
          <el-input v-model="productSet.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="title" :rules="[
            { required: true, message: '名称不能为空'}]">
          <el-input v-model="productSet.title" maxlength="8" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="价格(分)" prop="price" :rules="[
            { required: true, message: '价格不能为空'},
            { type: 'number', message: '价格必须为数字值'}]">
          <el-input v-model.number="productSet.price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 255px; margin: 45px 0 0 65px" @click="updateProduct"
                     :disabled="productSet.title===''||productSet.price===null||productSet.price===''"
          >确定修改
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import product from "../api/product"

export default {
  data() {
    return {
      adminName: "",
      // 搜索条件对象
      searchProduct: {
        productName: '',
      },
      // 产品数据 (页面初始化时会将数据传进来)
      productData: [],
      size: 5, // 每页的数据大小
      current: 1, //当前页数
      total: 0, // 总数量
      // 新增产品
      saveDialog: false,  // 是否显示
      // 添加的产品对象
      productObj: {
        title: '',
        price: null
      },
      // 编辑产品
      updateDialog: false,  // 是否显示
      // 编辑的产品对象
      productSet: {
        id: null,
        title: '',
        price: null
      },
    }
  },
  created() {
    this.getData()
    if(JSON.parse(localStorage.getItem('adminName')) === null){
      this.$router.push("/login")
    }else{
      setTimeout(() => {
        // 20毫秒后读取浏览器缓存
        this.adminName = JSON.parse(localStorage.getItem('adminName'))
      }, 20)
    }
  },
  methods: {
    // 添加框
    handleSave() {
      this.saveDialog = true
    },
    // 编辑框
    setDialog(id, title, price) {
      this.productSet.id = id
      this.productSet.title = title
      this.productSet.price = parseInt(parseFloat(price) * 100)
      this.updateDialog = true
    },
    // 删除
    remove(id) {
      product.deleteProduct(id).then(r => {
        this.$message.success(r.message)
        if(this.searchProduct.productName !== ''){
          this.search()
        }else {
          this.getData()
        }
      })
    },
    // 立即添加
    productAdd() {
      product.addProduct({
        "title": this.productObj.title,
        "price": this.productObj.price
      }).then(r => {
        this.$message.success(r.message)
        this.saveDialog = false
        this.getData()
      })
    },
    // 更新产品信息
    updateProduct() {
      product.updateProduct({
        "id": this.productSet.id,
        "title": this.productSet.title,
        "price": this.productSet.price
      }).then(r => {
        this.$message.success(r.message)
        this.updateDialog = false
        this.getData()
      })
    },
    // 每页大小修改
    sizeChange(val) {
      this.size = val
      if(this.searchProduct.productName !== ''){
        this.search()
      }else {
        this.getData()
      }
    },
    // 根据搜索条件查询
    search() {
      if(this.searchProduct.productName !== ''){
        product.getProductByTitle(this.searchProduct.productName,this.current, this.size).then(r => {
          let productList = r.data.productList
          this.total = r.total
          this.productData = productList
          // 将分转化为元
          for (let i = 0; i < productList.length; i++) {
            this.productData[i].price = productList[i].price / 100
          }
        })
      }else {
        this.$message.error("搜索的产品名不能为空")
      }

    },
    // 第几页
    currentChange(val) {
      this.current = val
      if(this.searchProduct.productName !== ''){
        this.search()
      }else {
        this.getData()
      }
    },
    // 获取数据，并赋值给wordData
    getData() {
      product.list(this.current, this.size).then(r => {
        let productList = r.data.productList
        this.total = r.total
        this.productData = productList
        // 将分转化为元
        for (let i = 0; i < productList.length; i++) {
          this.productData[i].price = productList[i].price / 100
        }
      })
    }
  }
}
</script>

<style>
@import "~@/assets/css/cpgl.css";
</style>
